<!-- template -->
<template>
    <div class="container">
        <!-- 头部区域 -->
        <div class="header">
            <el-menu
                class="el-menu-demo"
                mode="horizontal"
                :ellipsis="false"
                style="height: 75px;">
                <router-link to="/" custom v-slot="{ isActive, href, navigate }">
                    <el-menu-item index="0" style="width: 15%" :href="href" @click="navigate" :class="isActive ? 'active' : ''">广场</el-menu-item>
                </router-link>
                <router-link to="/tech" custom v-slot="{ isActive, href, navigate }">
                    <el-menu-item index="1" style="width: 15%" :href="href" @click="navigate" :class="isActive ? 'active' : ''">技术</el-menu-item>
                </router-link>
                <router-link to="/others" custom v-slot="{ isActive, href, navigate }">
                    <el-menu-item index="2" style="width: 15%" :href="href" @click="navigate" :class="isActive ? 'active' : ''">其他</el-menu-item>
                </router-link>
            </el-menu>
        </div>
        <!-- 内容区域 -->
        <div class="content">
            <!-- 侧边栏区域 -->
            <div class="aside">
                <router-view/>
<!--                <PersonalCard/>-->
            </div>
            <!-- 主要内容区域 -->
            <div class="main">
                <person-article-card
                    v-for="(item,index) in dataList"
                    :key="index"
                    :is-elite="item.elite"
                    :summary="item.summary"
                    :title="item.title"
                    :post-time="item.postTime"
                    :article-id="item.articleId"
                >
                </person-article-card>
            </div>
        </div>
    </div>
</template>

<!-- script -->
<script setup>
import Header from "@/components/HomeNavigation/Header.vue";
import PersonalCard from "@/components/Person/PersonalCard.vue";
import { ref } from 'vue'
import PersonArticleCard from "@/components/Content/cardComponents/PersonArticleCard.vue";
const count = ref(0)
const load = () => {
    count.value += 2
}
const value = ref(new Date())
</script>

<!-- style -->
<style scoped>
.container {
    height: 100vh; /* 全屏高度 */
    display: flex; /* 使用 flex 布局 */
    flex-direction: column; /* 垂直排列 */
}
.header {
    height: 75px; /* 固定高度 */
    width: 100%; /* 宽度为100% */
    position: fixed; /* 固定位置 */
}
.content {
    flex: 1; /* 填充剩余空间 */
    display: flex; /* 使用 flex 布局 */
    margin-top: 85px; /* 留出头部空间 */
}
.aside {
    width: 300px; /* 固定宽度 */
    position: fixed; /* 固定位置 */
    top: 85px; /* 留出头部空间 */
    bottom: 0; /* 铺满高度 */
    overflow-y: auto; /* 设置垂直滚动条 */
}
.main {
    flex: 1; /* 填充剩余空间 */
    background-color: #fff; /* 背景色为白色 */
    margin-left: 300px; /* 留出侧边栏空间 */
    overflow-y: auto; /* 设置垂直滚动条 */
}
.infinite-list {
    height: 300px;
    padding: 0;
    margin: 0;
    list-style: none;
}
.infinite-list .infinite-list-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    background: var(--el-color-primary-light-9);
    margin: 10px;
    color: var(--el-color-primary);
}
.infinite-list .infinite-list-item + .list-item {
    margin-top: 10px;
}
</style>
